<template>
  <div>
    <login-top>
      <div slot="leftTop"></div>
      <div slot="middleTop">登录哔哩哔哩</div>
      <div slot="rightTop"></div>
    </login-top>
    <LoginText style="margin: 4vw 0" label="账号" placeholder="请输入账号" rule="^.{6,16}$" @inputChange="res=>{model.username=res}"></LoginText>
    <LoginText label="密码" placeholder="请输入密码" type="password" rule="^.{6,16}$" @inputChange="res=>{model.password=res}"></LoginText>
    <router-link to="/userinfo"><LoginBtn btntext="登录" @textClick="loginSubmit"></LoginBtn></router-link>
  </div>
</template>

<script>
    import LoginTop from "../components/common/LoginTop";
    import LoginText from "../components/common/LoginText";
    import LoginBtn from "../components/common/LoginBtn";
    export default {
      components: {LoginTop,LoginText,LoginBtn},
      data(){
        return{
          model:{
            username:'',
            password:''
          }
        }
      },
      methods:{
        //自定义事件监听的回调函数
        async loginSubmit(res){
          let rulg=/^.{6,16}$/
          if (rulg.test(this.model.username)&&rulg.test(this.model.password)){
            //发送请求
            const res=await this.$http.post('/login',this.model)
            this.$msg.fail(res.data.msg)
            if(res.data.code==301 || res.data.code==302){
              return;
            }
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('id',res.data.id)
              this.$router.push('/userinfo')
          }else{
            this.$msg.fail('格式不正确,请重新输入!')
          }
        }
      }
    }
</script>

<style scoped>

</style>
